<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像数字处理</title>
		<link rel="shortcut icon" href="/img/favicon.ico" />
	</head>
	<body>
		<canvas id="c2" width="100" height="100" style='width:300px;height:300px'></canvas>
		<canvas id="c1" width="784" height="65000"></canvas>
		<script>
			var c1 = document.getElementById('c1');
			var c2 = document.getElementById('c2');
			var ctx1 = c1.getContext('2d');
			var ctx2 = c2.getContext('2d');
			var img = new Image();
			img.src = 'img/num.png';//图片问题，canvas部分显示的内容不会出现处理后的数字
			img.onload = function(){
				ctx1.drawImage(img,0,0);
				for(var j = 0; j < 3; j++){
					var imgData = ctx1.getImageData(0,j,784,1);
					var imgData2 = ctx2.createImageData(28,28);
					for(var i = 0; i < 784 * 4; i++){
						imgData2.data[i] = imgData.data[i];
					}
					ctx2.putImageData(imgData2,0,j*28,0,0,28,28)
				}
			}
		</script>
	</body>
</html>
